<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8">
    <title>Student Management System</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <body style="background-color:pink;">
</head>
<div  class="container my-2">

    <h1 style="text-align: center;color: red">学生信息系统</h1>

    <a th:href="@{/showNewStudentForm}" class="btn btn-dark btn-sm mb-2" > 添加学生 </a>
    <form  method="get" action="/search">
    <div class="form-group">
        <label for="stuName" style="color: red;">关键词:</label>
        <input type="text" name="stuName" class="form-control" id="stuName" placeholder="输入你要查询的学生">
    </div>
    <button style="text-align: right" type="submit" class="btn btn-success">搜索</button>
        <hr>
        <a th:href="@{/}" class="btn btn-primary"> 返回学生的总页数页面</a>

    </form>
    <table border="1" class="table">
        <thead class="thead-dark">
        <tr>
            <th>
                <a th:href="@{'/page/' + ${currentPage} + '?sortField=stuName&sortDir=' + ${reverseSortDir}}" style="color: greenyellow;">
                    姓名</a>
            </th>
            <th>
                <a th:href="@{'/page/' + ${currentPage} + '?sortField=stuId&sortDir=' + ${reverseSortDir}}" style="color: greenyellow;">
                学号</a>
            </th>
            <th>
                <a th:href="@{'/page/' + ${currentPage} + '?sortField=stuSex&sortDir=' + ${reverseSortDir}}" style="color: greenyellow;">
                年龄</a>
            </th>
            <th>
                <a th:href="@{'/page/' + ${currentPage} + '?sortField=stuAge&sortDir=' + ${reverseSortDir}}" style="color: greenyellow;">
                性别</a></th>
            <th style="color: Crimson;"> 操作 </th>
        </tr>
        </thead>
        <tbody>
        <tr class="table-warning" th:each="student : ${listStudent}" >
            <td th:text="${student.stuName}"></td>
            <td th:text="${student.stuId}"></td>
            <td th:text="${student.stuAge}"></td>
            <td th:text="${student.stuSex}"></td>
            <td> <a th:href="@{/showFormForUpdate/{id}(id=${student.id})}" class="btn btn-outline-warning">更新</a>
                <a th:href="@{/deleteStudent/{id}(id=${student.id})}" class="btn btn-outline-info">删除</a>
            </td>
        </tr>
        </tbody>
    </table>
    <div th:if = "${totalPages > 1}" style="color: red;">
        <div class = "row col-sm-10">
            <div class = "col-sm-3">
                总人数: [[${totalItems}]]
            </div>
            <div class = "col-sm-5">
					<span th:each="i: ${#numbers.sequence(1, totalPages)}">
						<a th:if="${currentPage != i}" th:href="@{'/page/' + ${i}+ '?sortField=' + ${sortField} + '&sortDir=' + ${sortDir}}">[[${i}]]</a>
						<span th:unless="${currentPage != i}">[[${i}]]</span>  &nbsp; &nbsp;
					</span>

            </div>
            <div class = "col-sm-1">
                <a th:if="${currentPage < totalPages}" th:href="@{'/page/' + ${currentPage + 1}+ '?sortField=' + ${sortField} + '&sortDir=' + ${sortDir}}">下页</a>
                <span th:unless="${currentPage < totalPages}">下页</span>
            </div>

            <div class="col-sm-1">
                <a th:if="${currentPage < totalPages}" th:href="@{'/page/' + ${totalPages}+ '?sortField=' + ${sortField} + '&sortDir=' + ${sortDir}}">上页</a>
                <span th:unless="${currentPage < totalPages}">上页</span>
            </div>
        </div>

    </div>
</div>

</body>

</html>